<div ngCombobox class="material-select" readonly>
  <div #origin class="select">
    <span class="combobox-label">
      <span
        class="selected-label-icon material-symbols-outlined"
        translate="no"
        >{{ displayIcon() }}</span
      >
      <span class="selected-label-text">{{ displayValue() }}</span>
    </span>
    <input aria-label="Label dropdown" placeholder="Select a label" ngComboboxInput />
    <span class="example-arrow material-symbols-outlined" translate="no">arrow_drop_down</span>
  </div>

  <ng-template ngComboboxPopupContainer>
    <ng-template
      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
      [cdkConnectedOverlayOpen]="true"
    >
      <div class="example-popup-container">
        <div ngListbox>
          @for (label of labels; track label.value) {
            <div ngOption [value]="label.value" [label]="label.value">
              <span
                class="example-option-icon material-symbols-outlined"
                translate="no"
                >{{label.icon}}</span
              >
              <span class="example-option-text">{{label.value}}</span>
              <span class="example-option-check material-symbols-outlined" translate="no"
                >check</span
              >
            </div>
          }
        </div>
      </div>
    </ng-template>
  </ng-template>
</div>
